// customize-cra react-app-rewired 对react工程进行webpack的增量修改
// 新版本的react脚手架工程对于此库支持不是太好，建议用 @craco/craco
// 修改此文件一定要重启当前的项目
const { override, addWebpackAlias, fixBabelImports } = require('customize-cra')
const path = require('path')

const rewirePostcss = require('react-app-rewire-postcss')
const px2rem = require('postcss-px2rem')

// 自定义一个函数，让它对本项目中的px进行转换
const pxToRem = () => (config, env) => {
  // 重写postcss
  rewirePostcss(config, {
    plugins: () => [
      //关键:设置px2rem
      px2rem({
        // px转换只对class样式，不能对于style中的单位进行转换
        // 设计稿是以 375px来的  iphone6
        // 行内样式中的px是不会转换的
        // 如果你不想让它把px转为 rem  PX Px
        remUnit: 37.5,
        exclude: /node-modules/
      })
    ]
  })
  return config
}

module.exports = override(
  // 添加路径别名
  addWebpackAlias({
    ['@']: path.resolve('./src')
  }),
  pxToRem(),
  // 对antd-mobile库进行按需加载
  fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css' })
)
